import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Form,Input} from 'element-react';
import IData from './personMsgData.js';

export class Wagecard extends Component {
    constructor(props) {
        super(props);

        this.state = {

            dialogVisible: false,
           form:{
               wageCard: IData.wageCard
           },

            value1: IData.wageCard,
            rules: {
                wageCard: [
                    { required: true, message: '请输入工资卡号', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value.length > '21'||isNaN(value)) {
                            callback(new Error('请输入正确的工资卡号'));
                        } else {
                            callback();
                        }
                    }
                    }
                ]},
        };
    }
    onChange(value) {
        this.setState({
            form: Object.assign({}, this.state.form, { wageCard: value}),
        });
    }
    enter(event){
        event=event||window.event;
        if(event.keyCode=='13'){
            this.changeValue();
        }
    }
    changeValue(){
        this.setState({ dialogVisible: false });
        this.refs.form.validate((valid) => {
            if (valid) {
                let value1=this.state.form.wageCard;
                this.setState({
                    value1
                })
            }
            else {
                this.setState({
                    value1:"2121123112311345"
                })
            }
        });
    }
    render() {
        return (
            <div className="zy1">
                <Button type="text"className="font" onClick={ () => this.setState({ dialogVisible: true }) }>
                    <span>{this.state.value1}</span>&nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                <Dialog
                    title="工资卡号"
                    size="middle"
                    visible={ this.state.dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100">
                            <Form.Item prop="wageCard" label="工资卡号">
                                <Input value={this.state.form.wageCard} onChange={this.onChange.bind(this)}onKeyDown={this.enter.bind(this)} ></Input>
                            </Form.Item>
                        </Form>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button type="primary" onClick={this.changeValue.bind(this) }>保存</Button>
                    </Dialog.Footer>
                </Dialog>
            </div>

        )
    }
}